<template>
    <!-- 搜索栏 -->
    <div class="option">
        <el-card>
            <div class="option_content">
                <div class="option_title" style="display: inline">
                    搜索条件 |
                </div>
                <div class="input-wrapper" style="display: inline">
                    <el-input v-model="flitItem.userName" placeholder="请输入发布人" clearable class="custom-input" />
                    <!-- <el-input v-model="flitItem.status" placeholder="请输入订单状态" clearable class="custom-input" /> -->
                    <el-input v-model="flitItem.title" placeholder="请输入订单标题" clearable class="custom-input" />
                    <el-button type="danger" class="back_btn Btn_act" @click="instituteFunction.rejectAll">
                        全部驳回
                    </el-button>
                    <el-button type="primary" class="custom-button Btn_act" @click="instituteFunction.accessAll">
                        全部通过
                    </el-button>
                </div>
            </div>
        </el-card>
    </div>


    <!-- 表格数据 -->
    <div class="job_table">
        <el-card>
            <el-table ref="multipleSelection" :data="FlitTableData" row-key="id" :row-class-name="tableRowClassName"
                style :="{ height: tableHeight }" @selection-change="multipBox.handleSelectChange" @row-click="RowClick">
                <el-table-column type="selection" :selectable="multipBox.selectable" width="55" />
                <el-table-column prop="userName" label="发布人" />
                <el-table-column prop="jobType" label="工作类型" sortable />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="salary" :formatter="formatPrice" label="价格" sortable />
                <!-- <el-table-column prop="taker" label="taker" /> -->
                <!-- 操作列 -->
                <el-table-column label="操作">
                    <template #default="{ row }" v-slot="scope" >
                        <el-button @click="instituteFunction.accessTableOne(row,$event)" size="small" type="primary">
                            通过
                        </el-button>
                        <el-button @click="instituteFunction.rejectTableOne(row,$event)" size="small" type="danger">
                            驳回
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>


    <!-- 侧边栏 -->
    <div class="job_deawer">
        <el-drawer :key="steps.drawerKey" v-model="drawer" :before-close="drawerClose" size="45%" title="详细信息" class="custom-drawer">
            <!-- active修改 -->
            <div class="job_process">
                <el-card>
                    <el-steps style="max-width: 100%" :active="steps.step" align-center>
                        <el-step title="待接单" description="description" />
                        <el-step title="已接单" description="description" />
                        <el-step title="经行中" description="description" />
                        <el-step title="已完成" description="description" />
                        <el-step title="已结算" description="description" />
                    </el-steps>
                </el-card>
            </div>
            <el-form :model="currentRowData" label-width="120px" class="form-container" status-icon>
                <el-form-item id="publisher" label="发布人">
                    <el-input v-model="currentRowData.userName" :disabled="!isEdit.userName" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="status" label="审核状态">
                    <el-input v-model="currentRowData.status" :disabled="!isEdit.status" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="title" label="标题">
                    <el-input v-model="currentRowData.title" :disabled="!isEdit.title" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item id="jobType" label="工作类型">
                    <el-input v-model="currentRowData.jobType" :disabled="!isEdit.jobType"
                        placeholder="请输入内容" />
                </el-form-item>
                <el-form-item id="description" label="详情">
                    <el-input v-model="currentRowData.description" :disabled="!isEdit.description"
                        placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="price" label="价格">
                    <el-input v-model="currentRowData.salary" :disabled="!isEdit.price" placeholder="请输入内容" />
                </el-form-item>

                <el-form-item id="createdTime" label="创建时间">
                    <div class="block">
                        <el-date-picker v-model="currentRowData.createdTime" type="date" :disabled="!isEdit.createdTime"
                            placeholder="请输入内容" />
                    </div>
                </el-form-item>

                <el-form-item id="startTime" label="开始时间">
                    <div class="block">
                        <el-date-picker v-model="currentRowData.startTime" type="date" :disabled="!isEdit.startTime"
                            plaseholder="请选择时间" />
                    </div>
                </el-form-item>

                <el-form-item id="publishTime" label="发布时间">
                    <div class="block">
                        <el-date-picker v-model="currentRowData.publishTime" type="date" :disabled="!isEdit.publishTime"
                            placeholder="请选择时间" />
                    </div>
                </el-form-item>

                <!-- <el-form-item id="taker" label="接取人">
                    <el-input v-model="currentRowData.takersName" :disabled="!isEdit.taker" placeholder="请输入内容" />
                </el-form-item> -->

                <el-form-item id="taker" label="审核通过后自动发布">
                    <el-switch v-model="currentRowData.autoPublish" class="ml-2" :disabled="!isEdit.autoPublish"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" /> </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="instituteFunction.accessDrawnOne()">
                        通过
                    </el-button>
                    <el-button type="danger" @click="instituteFunction.rejectDrawnOne()">
                        驳回
                    </el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>

</template>

<script setup lang="ts">
import useInstituteJob from '@/hooks/institute/useInstituteJob';
import type { User } from '@/interface/UserData';
import { onBeforeUnmount, onMounted, ref } from 'vue';

const {
    drawer,
    flitItem,
    steps,
    FlitTableData,
    formatPrice,
    multipBox,
    RowClick,
    currentRowData,
    isEdit,
    optionItem,
    initTable,
    instituteFunction,
    drawerClose,
} = useInstituteJob()


onMounted(() => {
    initTable();
})


// ==界面表格的动态高度===========================================================================
const tableHeight = ref(0);
const updateTableHeight = () => {
    // 计算动态高度，比如这里设置为窗口高度的 70%
    tableHeight.value = window.innerHeight - 300;
};
onMounted(() => {
    updateTableHeight(); // 页面加载时设置表格高度
    window.addEventListener("resize", updateTableHeight); // 监听窗口大小变化
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", updateTableHeight); // 清理事件监听器
});


// ==界面表格行的彩色===========================================================================

const tableRowClassName = ({
    row,
    rowIndex,
    double,
}: {
    row: User;
    rowIndex: number;
    double: number;
}) => {
    if (row.status == "审核失败") {
        return "warning-row";
    }
    if (row.status == "审核通过") {
        return "success-row";
    }
    if (row.status == "待审核") {
        return "info-row";
    }
    return "";
};

</script>

<style scoped>
/* .option_content {
  display: flex;// 按钮内边距 
  
} */

/* 侧边栏样式 ========================================================================================*/
.job_deawer {
    position: relative;
    /* 防止内容溢出 */
    overflow: hidden;
}

.job_process {
    margin-bottom: 20px;
}

.form-container {
    width: 100%;
    /* 让表单宽度占满整个抽屉 */
    max-width: 100%;
    /* 限制表单最大宽度 */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

/* 设置输入框的样式 */
.el-input {
    width: 100%;
    border-radius: 6px;
    /* 圆角输入框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 输入框聚焦时的效果 */
.el-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 6px rgba(64, 158, 255, 0.5);
}

.form-footer {
    text-align: right;
    margin-top: 20px;
}

/* 按钮样式 */
.el-button {
    font-weight: bold;
    border-radius: 4px;
}

/* ========搜索框======================================================================================== */

.option_title {
    margin-top: 6px;
    margin-right: 15px;
    width: 6%;
    font-family: Verdana;
    /* 设置字体 */
}

.custom-button {
    width: 6%;
    /* 按钮宽度 */
    border-radius: 8px;
    /* 按钮圆角 */
    margin-right: 1%;
    float: right;
    /* 鼠标悬停时效果 */
    transition: all 0.3s ease;
}
.back_btn {
    width: 6%;
    /* 按钮宽度 */
    border-radius: 8px;
    /* 按钮圆角 */
    margin-right: 5%;
    float: right;
    /* 鼠标悬停时效果 */
    transition: all 0.3s ease;
}
/* 按钮点击时的动态效果（使用 :active 伪类） */
.Btn_act:active {
    transform: scale(0.95);
    /* 按钮点击时缩小 */
    box-shadow: 0 0 10px;
    /* 点击时的阴影 */
}

/* 自定义输入框样式 */
.custom-input {
    width: 10%;
    margin-right: 15px;
    /* 输入框之间的间距 */
    border-radius: 8px;
    /* 圆角 */
}

.el-input__inner {
    padding: 10px 15px;
    /* 调整内边距 */
    font-size: 14px;
    /* 设置字体大小 */
    border: 1px solid #ccc;
    /* 边框颜色 */
    border-radius: 8px;
    /* 圆角边框 */
    background-color: #f9f9f9;
    /* 背景颜色 */
}

.el-input__inner:focus {
    border-color: #409eff;
    /* 聚焦时的边框颜色 */
    background-color: #fff;
    /* 聚焦时的背景颜色 */
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
    /* 聚焦时的阴影效果 */
}

.job_table {
    position: relative;
    top: 18px;
}

/* 橙色 */
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

/* 绿色 */
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

/* 红色 */
.el-table .danger-row {
    --el-table-tr-bg-color: var(--el-color-danger-light-9);
}

/* 灰色 */
.el-table .second-row {
    --el-table-tr-bg-color: var(--el-text-color-secondary);
}

/* 蓝色 */
.el-table .progress-row {
    --el-table-tr-bg-color: var(--el-color-primary-light-9);
    /* 浅蓝色 */
}
</style>
